<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>全国少儿世界和平海报作品征集活动</title>
<link href="/Public/css/maint.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="/Public/css/gyBase.css">
<link href="/Public/css/font.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/Public/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Public/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="/Public/js/common.js"></script>
<script type="text/javascript" src="/Public/js/main.js"></script>
<script type="text/javascript">
$(function() {
	/*瀑布流开始*/
	var container = $('#ulTeacher');
	var loading = $('#imloading');
	// 初始化loading状态
	loading.data("on", true);				

	var load = function(sqlJson) {
		if (sqlJson.size <= 0) {
			loading.text('只有这么多了！');
		} else {
			var html = "";
			var rank = 0;
			var href = "";
			for (var i in sqlJson.datas) {
				rank = ( parseInt( sqlJson.pre ) * parseInt( sqlJson.limit ) + 1 + parseInt( i ) );
				href = "/?m=wap&c=praise&a=teacherdetail&praise={$praise}&teacher_name="+sqlJson.datas[i].teacher_name + "&teacher_telephone=" + sqlJson.datas[i].teacher_telephone;
				html +="<a href='" + href + "'><li class='liteacher'>"+ "<span class='teacherNum'>"+ rank +"</span>";
				html +="<span class='teacherName'>"+sqlJson.datas[i].teacher_name+"</span>";
				html +="<span class='teacherPoll'><span class='icon iconfont icon-jiantou liGo'></span><span class='spanPoll'>"+"得票总数："+sqlJson.datas[i].votes+"</span>";
				html +="<span class='spanPackge'>"+"件数总计："+sqlJson.datas[i].counts+"</span>" + "</span></li></a>";
			}
			/*模拟ajax请求数据时延时800毫秒*/
			var time = setTimeout(function() {
				var newElems = $(html).css({
					opacity: 0
				}).appendTo(container);
				newElems.imagesLoaded(function() {
					newElems.animate({
						opacity: 1
					}, 10);	
					container.masonry('appended', newElems, true);
					loading.data("on", true).fadeOut();
					clearTimeout(time);
				});
			}, 10)
		}
	};

	common.teacher.fetchRankJson( { praise_id: "{$praise}" }, load );
	//common.teacher.fetchRankJson( { praise_id: 6 }, load );

	$(window).scroll(function() { 
		if (!loading.data("on")) return;
		
		var itemNum = container.find('.liteacher').length;//20 0000
		var itemArr = [];
		itemArr[0] = $('#waterfull').find('.liteacher').eq(itemNum - 1).offset().top + $('#waterfull').find('.liteacher').eq(itemNum - 1)[0].offsetHeight;
		itemArr[1] = $('#waterfull').find('.liteacher').eq(itemNum - 2).offset().top + $('#waterfull').find('.liteacher').eq(itemNum - 1)[0].offsetHeight;
		itemArr[2] = $('#waterfull').find('.liteacher').eq(itemNum - 3).offset().top + $('#waterfull').find('.liteacher').eq(itemNum - 1)[0].offsetHeight;
		var maxTop = Math.max.apply(null, itemArr);
		if (maxTop < $(window).height() + $(document).scrollTop()) {
			//加载更多数据
			loading.data("on", false).fadeIn();
			common.teacher.fetchRankJson( { praise_id: "{$praise}" }, load );
			//common.teacher.fetchRankJson( { praise_id: 6}, load );
		}
	});
});
</script>
</head>	
<body>
<!-------------header------------------------->
<include file="Tpl/header" />
<!-------------header END------------------------->
<!-------------main------------------------->
<div id="main" class="bot50">
 	<div class="activeTitles">
        <ul class="ulactTitle">
            <li><a href="/?m=wap&c=praise&a=index&praise={$praise}" target="_self"><span>作品人气榜</span></a></li>
            <li class="on"><a href="/?m=wap&c=praise&a=teacher&praise={$praise}" target="_self"><span class="bor0">人气指导老师</span></a></li>
        </ul>
    </div>
     <!-------------search------------------------->
    <!-- <div class="searchBox">
        <div class="search">
            <span class="fa fa-fw fa-search"></span>
            <input class="txt"  placeholder="输入参赛编号或者作者姓名进行搜索"/>
        </div>
    </div> -->
    <!-------------search  END------------------------->
    <div class="teacherBox" id="waterfull">
        <ul class="ulTeacher" id="ulTeacher">
        </ul>
    </div>
   <div id="imloading" class="loading">加载中</div>
</div>
<include file="Tpl/footer" praise="{$praise}"/>
<script src="/Public/js/banner.js" type="text/javascript"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
	wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '{$wxuser["appid"]}', // 必填，公众号的唯一标识
            timestamp: "{$timestamp}", // 必填，生成签名的时间戳
            nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
            signature: '{$wxSha1}',// 必填，签名，见附录1
            jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.error(function(res){
            //console.log(res);
    		// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
        wx.ready( function( e ){
        	wx.onMenuShareAppMessage({
			    title: "参与【和平海报】活动  让公益成为社会生活方式", // 分享标题
			    desc: "为身边的小画家加油，给孩子们一个向更多人展示作品的机会，播撒和平的种子、树立公益思想、拓展创意思维、培养全球观念。", // 分享描述
			    link: location.protocol + "//" + window.location.hostname + "/" + "index.php?m=wap&c=praise&a=index&praise={$praise}", // 分享链接
			    imgUrl: location.protocol + "//" + window.location.hostname + "/" + "Public/images/praise/sharepeaceSmall.jpg", // 分享图标
			    type: 'link', // 分享类型,music、video或link，不填默认为link
			    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
			    success: function () { 
			        // 用户确认分享后执行的回调函数
			    },
			    cancel: function () { 
			        // 用户取消分享后执行的回调函数
			    }
			});
			wx.onMenuShareTimeline({
			    title: "参与【和平海报】活动  让公益成为社会生活方式", // 分享标题
			    link: location.protocol + "//" + window.location.hostname + "/" + "index.php?m=wap&c=praise&a=index&praise={$praise}", // 分享链接
			    imgUrl: location.protocol + "//" + window.location.hostname + "/" + "Public/images/praise/sharepeaceSmall.jpg", // 分享图标
			    success: function () { 
			        // 用户确认分享后执行的回调函数
			    },
			    cancel: function () { 
			        // 用户取消分享后执行的回调函数
			    }
			});
        })
    </script>
<script src="/Public/js/jquery.lazyload.js"></script>
<script type="text/javascript" src="/Public/js/jquery.slides.js"></script>
<script type="text/javascript">
$(function(){
	$("#slides img").lazyload({effect: "fadeIn"});
});
 $(function(){
  $("#slides").slidesjs({
    start: 1,
    navigation:{
      active: false,
      effect: "fade"
    },
    play: {
      auto: true,
    },
    effect: {
      slide: {
        speed: 500
      },
      fade: {
        speed: 500,
        crossfade: true
      }
    }
  });
});
</script>
</body>
</html>
